﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel"
  :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg"
  :commonConfig="commonConfig">
    <el-date-picker
      v-model = "selectedValue"
      :style = "myConfig.myStyle"
      :disabled = "!myConfig.isEnable" :readonly="myConfig.other.isReadOnly"
      :placeholder = "myConfig.other.placeholder"
      :size = "commonConfig.size"
      :format = "myConfig.other.format?myConfig.other.format:'yyyy-MM-dd'"
      :clearable = "myConfig.other.clearable"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions"
      type="date"
      @change="onChange">
    </el-date-picker>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
export default {
  components: {
    baseComponent, baseUI
  },
  extends: baseComponent,
  mounted () {
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return false
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {
    isDataComponent () {
      return true
    }
  }
}
</script>
<style>
</style>
